li {
    list-style: none;
}

* {
    padding: 0;
    margin: 0;
}

img {
    display: block;
}

a {
    text-decoration: none;
}

.header {
    height: .88rem/* 44/50 */
    ;
    display: flex;
    position: relative;
    .header-left {
        width: 1.76rem/* 88/50 */
        ;
        height: .88rem/* 44/50 */
        ;
        .jt {
            display: block;
            width: .88rem/* 20/50 */
            ;
            height: .88rem/* 21/50 */
            ;
            font-size: .40rem/* 16/50 */
            ;
            color: #232628;
            text-align: center;
            line-height: .88rem/* 44/50 */
            ;
        }
    }
    .header-conter {
        width: 3.98rem/* 199/50 */
        ;
        height: .88rem/* 44/50 */
        ;
        text-align: center;
        line-height: .88rem/* 44/50 */
        ;
        color: #232628;
        font-size: .32rem/* 16/50 */
        ;
    }
    .header-right {
        width: 1.76rem/* 88/50 */
        ;
        height: .88rem/* 44/50 */
        ;
        display: flex;
        .ej {
            display: block;
            width: .88rem/* 44/50 */
            ;
            height: .88rem/* 44/50 */
            ;
            color: #232628;
            font-size: 20px;
            text-align: center;
            line-height: .88rem/* 44/50 */
            ;
        }
        .header-item {
            width: .88rem/* 44/50 */
            ;
            height: .88rem/* 44/50 */
            ;
            .cd {
                width: .44rem/* 22/50 */
                ;
                height: .42rem/* 21/50 */
                ;
                color: #232628;
                font-size: 20px;
                text-align: center;
                line-height: .88rem/* 44/50 */
                ;
                display: block;
                margin: 0 auto;
                cursor: pointer;
            }
        }
    }
    .header-last {
        width: 2.24rem/* 112/50 */
        ;
        height: 3.88rem/* 194/50 */
        ;
        position: absolute;
        top: 100%;
        right: .16rem/* 8/50 */
        ;
        display: none;
        z-index: 10;
        background: #fff;
        border: 1px solid #E9ECF0;
        box-shadow: 0 4px 12px 0 #E9ECF0;
        border-radius: 0.28571429rem;
        box-sizing: border-box;
        .header-title {
            width: 2.2rem/* 110/50 */
            ;
            height: .96rem/* 48/50 */
            ;
            a {
                display: block;
                padding: 0 .24rem/* 12/50 */
                ;
                width: 110px;
                height: .9rem/* 45/50 */
                ;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                .fz {
                    display: block;
                    width: .4rem/* 20/50 */
                    ;
                    height: .42rem/* 21/50 */
                    ;
                    font-size: .36rem/* 20/50 */
                    ;
                    text-align: center;
                    line-height: .42rem/* 21/50 */
                    ;
                    color: #232628;
                }
                p {
                    height: .38rem/* 19/50 */
                    ;
                    margin-left: .12rem/* 6/50 */
                    ;
                    color: #232628;
                    font-size: .28rem/* 14/50 */
                    ;
                    line-height: .38rem/* 19/50 */
                    ;
                }
            }
        }
    }
    .active {
        display: block;
    }
}

.nav {
    height: .9rem/* 45/50 */
    ;
    border-bottom: 1px solid #E9ECF0;
    box-sizing: border-box;
    display: flex;
    .nav-item {
        flex: 1;
        text-align: center;
        line-height: .9rem/* 45/50 */
        ;
        height: .9rem/* 45/50 */
        ;
        color: #232628;
        font-size: .28rem/* 14/50 */
        ;
        position: relative;
        .shang {
            width: .24rem/* 8/50 */
            ;
            height: .24rem/* 8/50 */
            ;
            text-align: center;
            line-height: .24rem/* 8/50 */
            ;
            font-size: .24rem/* 12/50 */
            ;
            color: #B4BABF;
            position: absolute;
            top: .3rem/* 15/50 */
            ;
            right: .32rem/* 16/50 */
            ;
        }
        .xia {
            width: .24rem/* 8/50 */
            ;
            height: .24rem/* 8/50 */
            ;
            text-align: center;
            line-height: .24rem/* 8/50 */
            ;
            font-size: .24rem/* 12/50 */
            ;
            font-size: .24rem/* 12/50 */
            ;
            color: #B4BABF;
            position: absolute;
            bottom: .24rem/* 13/50 */
            ;
            right: .32rem/* 16/50 */
            ;
        }
        .active {
            color: #FF734C;
        }
    }
    .active {
        color: #FF734C;
    }
}

.purposse {
    height: .88rem/* 44/50 */
    ;
    display: flex;
    .purposse-item {
        flex: 1;
        padding: .2rem/* 10/50 */
        .08rem/* 4/50 */
        ;
      
        a {
            display: block;
            line-height: .44rem/* 22/50 */
            ;
            font-size: .24rem/* 12/50 */
            ;
            color: #232628;
            text-align: center;
            background-color: #F7F9FA;
            
        }
        .sx{
            display: block;
            line-height: .44rem/* 22/50 */
            ;
            font-size: .24rem/* 12/50 */
            ;
            color: #232628;
            background-color: #F7F9FA;
            .sj {
                display: inline-block;
                width: .24rem/* 12/50 */
                ;
                height: .26rem/* 13/50 */
                ;
                font-size: .24rem/* 12/50 */
                ;
                color: #232628;
                text-align: center;
                line-height: .26rem/* 13/50 */
                ;
            }
        }
        .active {
            color: #FF734C;
            border: 1px solid #FF734C;
            border-radius: .04rem/* 2/50 */
            ;
        }
    }
    .aside{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10;
        background-color: rgba(0, 0, 0, 0.8);
        .layer{
            width: 90%;
            height: 100%;
            background-color: #fff;
            margin-left: 10%;
            border-top: 1px solid transparent;
            box-sizing: border-box;
            .layer-top{
                height: 12.38rem /* 619/50 */;
                padding: 0 .28rem /* 14/50 */;
                box-sizing: border-box;
                overflow-x: hidden;
                overflow-y: auto;
                p{
                    height: .32rem /* 16/50 */;
                    line-height: .32rem /* 16/50 */;
                    margin: .32rem /* 16/50 */ 0;
                    color: #232628;
                    font-size: .32rem /* 16/50 */;
                    box-sizing: border-box;
                }
                .layer-item{
                    display: flex;
                    flex-wrap: wrap;
                    li{
                        width: 33.333%;
                        height: .72rem /* 36/50 */;
                        margin-bottom: .24rem /* 12/50 */;
                        padding: 0 .12rem /* 6/50 */;
                        box-sizing: border-box;
                        a{
                            display: block;
                            height: .72rem /* 36/50 */;
                            background-color: #F7F9FA;
                            font-size: .24rem /* 12/50 */;
                            line-height: .72rem /* 36/50 */;
                            text-align: center;
                            color: rgb(35, 38, 40);
                            border-radius: .04rem /* 2/50 */;
                        }
                        .active{
                            border: 1px solid #FF734C;
                            color: #FF734C;
                            background-color: #fff;
                            box-sizing: border-box;
                        }
                    }
                }
            }
            .layer-bottom{
                height: .96rem /* 48/50 */;
                background-color: #E9ECF0;
                color: #232628;
                font-size: .32rem /* 16/50 */;
                line-height: .96rem /* 48/50 */;
                text-align: center;
            }
        }
    }
}

.container {
    background-color: #E9ECF0;
    .conter {
        display: flex;
        flex-wrap: wrap;
        padding: .2rem/* 10/50 */
        .08rem/* 4/50 */
        .32rem/* 16/50 */
        ;
        box-sizing: border-box;
        .conter-title {
            width: 3.67rem/* 183.5/50 */
            ;
            height: 5.38rem/* 269/50 */
            ;
            margin-bottom: .16rem/* 8/50 */
            ;
            padding: 0 .08rem/* 4/50 */
            ;
            box-sizing: border-box;
            background-color: #fff;
            img {
                width: 3.51rem/* 175.5/50 */
                ;
                height: 3.8316rem/* 191.58/50 */
                ;
            }
            .conter-item {
                padding: .16rem/* 8/50 */
                .16rem/* 8/50 */
                .32rem/* 16/50 */
                ;
                box-sizing: border-box;
                .conter-title {
                    height: .36rem/* 18/50 */
                    ;
                    width: 1.64rem/* 82/50 */
                    ;
                    border-radius: .18rem/* 9/50 */
                    ;
                    border: 1px solid #FF734C;
                    color: #FF734C;
                    font-size: .24rem/* 12/50 */
                    ;
                    line-height: .36rem/* 18/50 */
                    ;
                    text-align: center;
                    white-space: nowrap;
                    margin-bottom: .08rem/* 4/50 */
                    ;
                    box-sizing: border-box;
                }
                .conter-desc {
                    height: .32rem/* 16/50 */
                    ;
                    line-height: .32rem/* 16/50 */
                    ;
                    font-size: .28rem/* 14/50 */
                    ;
                    color: #232628;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .conter-price {
                    height: .38rem/* 19/50 */
                    ;
                    line-height: .38rem/* 19/50 */
                    ;
                    font-size: .28rem/* 14/50 */
                    ;
                    color: #FF734C;
                }
            }
        }
    }
}

.find {
    width: .72rem/* 36/50 */
    ;
    height: 2.08rem/* 104/50 */
    ;
    position: fixed;
    bottom: 2rem/* 100/50 */
    ;
    right: .16rem/* 8/50 */
    ;
    display: none;
    .frind {
        display: block;
        border-radius: 50%;
        background-color: #fff;
        width: .72rem/* 36/50 */
        ;
        height: .72rem/* 36/50 */
        ;
        box-shadow: 0 0.28571429rem 0.42857143rem 0 #dee2e5;
        text-align: center;
        line-height: .72rem/* 36/50 */
        ;
        font-size: .4rem/* 20/50 */
        ;
        color: #232628;
    }
    .top {
        margin-top: .72rem/* 36/50 */
        ;
        display: block;
        border-radius: 50%;
        background-color: #fff;
        width: .72rem/* 36/50 */
        ;
        height: .72rem/* 36/50 */
        ;
        box-shadow: 0 0.28571429rem 0.42857143rem 0 #dee2e5;
        text-align: center;
        line-height: .72rem/* 36/50 */
        ;
        font-size: .4rem/* 20/50 */
        ;
        color: #232628;
    }
}

.active {
    display: block;
}

.chat {
    display: none;
    width: 100%;
    height: 12.14rem/* 607/50 */
    ;
    background-color: #fff;
    position: fixed;
    left: 0;
    bottom: 0;
    .chat-top {
        height: 1.2rem/* 60/50 */
        ;
        background-color: rgb(255, 102, 0);
        padding: .2rem/* 10/50 */
        ;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        .chat-ber {
            line-height: .28rem/* 14/50 */
            ;
            font-size: .28rem/* 14/50 */
            ;
            color: #fff;
        }
        .chat-sj {
            font-size: .4rem/* 20/50 */
            ;
            color: #fff;
        }
    }
    .chat-bottom {
        height: 10.94rem/* 547/50 */
        ;
        .btn-top {
            height: 9.14rem/* 457/50 */
            ;
            padding: .28rem/* 14/50 */
            ;
            box-sizing: border-box;
             overflow-y: auto;
            .btn-item {
                // height: 1.9rem/* 95/50 */
                // ;
                padding: .2rem/* 10/50 */
                ;
                padding-left: 0;
                display: flex;
                img {
                    width: 36px;
                    height: 36px;
                    margin-right: 10px;
                    margin-top: 16px;
                    vertical-align: top
                }
                .base {
                    width: 5.74rem/* 287/50 */
                    ;
                    // height: 1.5rem/* 75/50 */
                    // ;
                    .msg {
                        color: rgb(178, 178, 178);
                        font-size: .24rem/* 12/50 */
                        ;
                        margin-bottom: .04rem/* 2/50 */
                        ;
                        line-height: .28rem/* 14/50 */
                        ;
                        height: .28rem/* 14/50 */
                        ;
                    }
                    .per {
                        height: 1.18rem/* 59/50 */
                        ;
                        border: 1px solid rgb(240, 240, 240);
                        box-sizing: border-box;
                        font-size: .26rem/* 13/50 */
                        ;
                        word-break: break-word;
                        padding: .2rem/* 10/50 */
                        .3rem/* 15/50 */
                        ;
                        border-radius: .06rem/* 3/50 */
                        ;
                        line-height: .32rem/* 16/50 */
                        ;
                    }
                    .pers{
                        height: 5.42rem /* 271/50 */;
                        padding: .2rem /* 10/50 */ .3rem /* 15/50 */;
                        border-radius: .06rem /* 3/50 */;
                        box-sizing: border-box;
                        border: 1px solid rgb(240, 240, 240);
                        .pers-top{
                            height: 2.04rem /* 102/50 */;
                            font-size: .26rem /* 13/50 */;
                            color: rgb(29, 39, 84);
                            word-break: break-word;
                            overflow: hidden;
                        }
                        .pers-bottom{
                            height: 2.98rem /* 149/50 */;
                            .pers-one{
                                margin-bottom: 8px;
                                padding-bottom: 8px;
                                border-bottom: 1px solid rgb(225, 229, 240);
                            }
                            .pers-two{
                                height: .34rem /* 17/50 */;
                                margin-bottom: .1rem /* 5/50 */;
                                font-size: .26rem /* 13/50 */;
                                line-height: .34rem /* 17/50 */;
                                color: rgb(29, 39, 84);
                            }
                            .pers-three{
                                height: 1.54rem /* 77/50 */;
                                p{
                                    height: .34rem /* 17/50 */;
                                    margin: .06rem /* 3/50 */ 0;
                                    color: rgb(24, 128, 255);
                                    font-size: .26rem /* 13/50 */;
                                    cursor: pointer;
                                    line-height: .34rem /* 17/50 */;
                                }
                            }
                            .pers-five{
                                height: .34rem /* 17/50 */;
                                margin: .16rem /* 8/50 */ 0;
                                font-size: .26rem /* 13/50 */;
                                color: rgb(144, 149, 171);
                                line-height: .34rem /* 17/50 */;
                            }
                        }
                    }
                }
            }
            .btn-conter{
                div{
                    height: .64rem /* 16/50 */;
                    font-size: .24rem /* 12/50 */;
                    text-align: center;
                    line-height: 16px;
                    // margin-bottom: .2rem /* 10/50 */;
                    color: rgb(153, 153, 153);
                    span{
                        font-size: .24rem /* 12/50 */;
                    }
                    p{
                        color: rgb(153, 153, 153);
                        height: .32rem /* 16/50 */;
                        font-size: .24rem /* 12/50 */;
                        text-align: center;
                        line-height: 16px;
                    }

                }
                .may{
                    height: 1.56rem /* 78/50 */;
                    padding: .2rem /* 10/50 */ 0 .2rem /* 10/50 */ .2rem /* 10/50 */;
                    box-sizing: border-box;
                    p{
                        height: .3rem /* 15/50 */;
                        font-size: .24rem /* 12/50 */;
                        color: rgb(178, 178, 178);
                        text-align: right;
                    }
                    div{
                        width: 1.04rem /* 52/50 */;
                        height: .84rem /* 42/50 */;
                        line-height: .84rem /* 42/50 */;
                        background-color: rgb(255, 102, 0);
                        border-radius: .1rem /* 5/50 */;
                        text-align: center;
                        float: right;
                        font-size: .26rem /* 13/50 */;
                    }
                }
            }
            .btn-conters{
                // height: 2.6rem /* 130/50 */;
                // overflow-y: auto;
                .sh{
                    height: 1.1rem /* 55/50 */;
                    // padding: .2rem /* 10/50 */ 0 .2rem /* 10/50 */ .2rem /* 10/50 */;
                    box-sizing: border-box;
                    p{
                        height: .3rem /* 15/50 */;
                        font-size: .24rem /* 12/50 */;
                        color: rgb(178, 178, 178);
                        text-align: right;
                    }
                    div{
                        padding: .2rem /* 10/50 */  .3rem /* 15/50 */;
                        line-height: .38rem /* 19/50 */;
                        background-color: rgb(255, 102, 0);
                        border-radius: .1rem /* 5/50 */;
                        text-align: center;
                        float: right;
                        font-size: .26rem /* 13/50 */;
                        color: #fff;
                    }
                }
                .jqrsh{
                    height: 2.12rem /* 106/50 */;
                    padding: .2rem /* 10/50 */ .2rem /* 10/50 */ .2rem /* 10/50 */ 0;
                    display: flex;
                    img{
                        display: block;
                        width: .72rem /* 36/50 */;
                        height: .72rem /* 36/50 */;
                        margin-top: .32rem /* 16/50 */;
                        margin-right: .2rem /* 10/50 */;
                        background-color: red;
                        
                    }
                    .fslasts{
                        height: 1.72rem /* 86/50 */;
                        p{
                            height: .28rem /* 14/50 */;
                            margin-bottom: .04rem /* 2/50 */;
                            color: rgb(178, 178, 178);
                            font-size: .24rem /* 12/50 */;
                            line-height: .28rem /* 14/50 */;
                        }
                        div{

                        }
                    }
                }
               
            }
        }
        .btn-bottom {
            height: 1.8rem/* 90/50 */
            ;
            padding: .1rem/* 5/50 */
            .2rem/* 10/50 */
            .1rem/* 5/50 */
            .28rem/* 14/50 */
            ;
            border-top: 1px solid  rgb(221, 221, 221);
            box-sizing: border-box;
            .tip-top {
                height: .6rem/* 30/50 */
                ;
                display: flex;
                align-items: center;
                i {
                    display: block;
                    width: .48rem/* 24/50 */
                    ;
                    height: .48rem/* 24/50 */
                    ;
                    font-size: .40rem/* 24/50 */
                    ;
                    margin: 0 .22rem/* 11/50 */
                    0 .1rem/* 5/50 */
                    ;
                    color: rgb(102, 102, 102);
                }
            }
            .tip-bottom {
                height: 1rem/* 50/50 */
                ;
                
                display: flex;
                align-items: center;
                position: relative;
                .input{
                    width: 6rem /* 300/50 */;
                    height: .8rem /* 40/50 */;
                    background-color: rgb(243, 244, 248);
                    border: none;
                    outline: none;
                    font-size: .26rem /* 13/50 */;
                    text-indent: 1em;
                }
                .fs{
                    width: .96rem /* 48/50 */;
                    height: .6rem /* 30/50 */;
                    background-color: rgb(255, 102, 0);
                    font-size: .28rem /* 14/50 */;
                    color: #fff;
                    text-align: center;
                    line-height: .6rem /* 30/50 */;
                    border-radius: .06rem /* 3/50 */;
                }
            }
            .xlitem{
                display: none;
                width: 7.46rem /* 373/50 */;
                height: 2.72rem /* 136/50 */;
                position: absolute;
                top: 380px;
                left: 1px;
                background: rgb(255, 255, 255);
                border-top: 1px solid rgb(221, 221, 221);
                z-index: 10;
                li{
                    width: .5rem /* 25/50 */;
                    height: .5rem /* 25/50 */;
                    margin: .2rem /* 10/50 */;
                    background: url('https://static.meiqia.com/widget/static/emoji@2x.png') no-repeat;
                    float: left;
                    vertical-align: middle;
                    cursor: pointer;
                    background-size: cover;
                    box-sizing: border-box;
                }

            }
            .zanitem{
                width: 7.5rem /* 375/50 */;
                height: 10.94rem /* 547/50 */;
                background-color: rgba(0, 0, 0, 0.35);
                position: absolute;
                left: 0;
                top: 1.2rem /* 60/50 */;
                z-index: 10;
                display: none;
                .zan-top{
                    width: 100%;
                    height: 5.08rem /* 254/50 */;
                    background-color: #fff;
                    .zan-one{
                        padding: 10px 30px 0px;
                        box-sizing: border-box;
                        width: 100%;
                        text-align: center;
                        font-size: .28rem /* 14/50 */;
                        color: rgb(102, 102, 102);
                        height: .58rem /* 29/50 */;
                        line-height: .38rem /* 19/50 */;
                        position: relative;
                        .gb{
                            width: .4rem /* 20/50 */;
                            height: .4rem /* 20/50 */;
                            background: url('https://static.meiqia.com/widget/static/icon-desktop@2x.png')-2px -133px / 44px no-repeat;
                            position: absolute;
                            right: .2rem /* 20/50 */;
                            top: .2rem /* 5/50 */;
                        }
                    }
                    .zan-two{
                        height: 1.64rem /* 82/50 */;
                        margin-top: .2rem /* 10/50 */;
                        display: flex;
                        justify-content: center;
                        .eval{
                            width: 1.24rem /* 62/50 */;
                            height: 1.64rem /* 82/50 */;
                            padding: .2rem /* 10/50 */ .1rem /* 5/50 */ 0;
                            box-sizing: border-box;
                            color: rgb(102, 102, 102);
                            font-size: .26rem /* 13/50 */;
                            .evala-img{
                                width: .8rem /* 40/50 */;
                                height: .8rem /* 40/50 */;
                                margin: 0 auto;
                                background: url('https://static.meiqia.com/widget/static/icon-desktop@2x.png')-2px -310px / 44px no-repeat;
                            }
                            .eval-desc{
                                height: .44rem /* 22/50 */;
                                margin-top: .1rem /* 5/50 */;
                                text-align: center;
                                line-height: .44rem /* 20/50 */;
                               
                               
                            }
                            .evalb-img{
                                width: .8rem /* 40/50 */;
                                height: .8rem /* 40/50 */;
                                margin: 0 auto;
                                background: url('https://static.meiqia.com/widget/static/icon-desktop@2x.png')-2px -354px / 44px no-repeat;
                            }
                            .evalc-img{
                                width: .8rem /* 40/50 */;
                                height: .8rem /* 40/50 */;
                                margin: 0 auto;
                                background: url('https://static.meiqia.com/widget/static/icon-desktop@2x.png')-2px -398px / 44px no-repeat;
                            }
                        }
                    }
                    .zan-three{
                        height: 2.6rem /* 130/50 */;
                        padding: 10px 20px 15px;
                        box-sizing: border-box;
                        textarea{
                            display: block;
                            width: 6.7rem /* 335/50 */;
                            height: 1.2rem /* 60/50 */;
                            padding: .2rem /* 10/50 */;
                            box-sizing: border-box;
                            overflow-y: auto;
                            resize: none;
                            outline: none;
                            border: 1px solid rgb(237, 237, 237);
                            font-size: .26rem /* 13/50 */;
                            color: rgb(102, 102, 102);
                            // text-align: start;
                            // appearance: textarea;
                            // text-rendering: auto;
                        }
                        .zan-four{
                            display: block;
                            width: 100%;
                            box-sizing: border-box;
                            height: .7rem /* 35/50 */;
                            margin-top: .2rem /* 10/50 */;
                            border-radius: .06rem /* 3/50 */;
                            background-color: rgb(255, 102, 0);
                            font-size: .26rem /* 13/50 */;
                            text-align: center;
                            line-height: .7rem /* 35/50 */;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
}